<template>
  <div class="approval-rejected-page">
    <div class="wrap">
      <!-- 顶部步骤条 -->
      <StepBar :steps="steps" :current-step="rejectedStep" />

      <div class="content">
        <!-- 审批结果卡片 -->
        <div class="result-card">
          <div class="card-title">审批结果</div>
          <div class="status-display">
            <div class="status-icon">
              <span class="icon-text">!</span>
            </div>
            <div class="status-text">审批被拒绝</div>
            <div class="status-message">
              很抱歉，您的退住申请未通过审批。如有疑问，请联系相关管理人员。
            </div>
          </div>

          <!-- 操作记录 -->
          <div class="operation-record">
            <div class="record-title">操作记录</div>
            <div class="record-item">
              <div class="record-dot"></div>
              <div class="record-content">
                <div class="record-text">护理员a发起申请</div>
                <div class="record-user">护理员a(已发起)</div>
              </div>
              <div class="record-time">{{ formData.submitTime }}</div>
            </div>
            
            <div class="record-item">
              <div class="record-dot"></div>
              <div class="record-content">
                <div class="record-text">(退住审批员)审批·{{ steps[rejectedStep] }}</div>
                <div class="record-user">(审批被拒绝)</div>
              </div>
              <div class="record-time">{{ rejectionTime }}</div>
            </div>
          </div>

          <!-- 返回按钮 -->
          <div class="footer">
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Close, Check } from '@element-plus/icons-vue'
import StepBar from '@/components/StepBar/index.vue'

const router = useRouter()
const route = useRoute()

// 步骤条数据
const steps = ['申请退住', '申请审批', '解除合同', '调整账单', '账单审批', '退住审批', '费用清算']

// 被拒绝的步骤（动态设置）
const rejectedStep = ref(1) // 默认在第2步被拒绝

// 表单数据
const formData = ref({
  elderlyNo: 'TZ204810101S000001',
  elderlyName: '高启强',
  elderlyIdCard: '230203197702221029',
  contact: '13898988888',
  feePeriod: '2048-10-10 —— 2049-10-10',
  careLevel: '特级护理等级',
  bedNumber: '101床位',
  contract: '高启强长住合同.pdf',
  consultant: '顾廷烨',
  caregiver: '盛长柏、盛明兰、盛如兰',
  checkoutDate: '2048-10-15',
  checkoutReason: '服务不周',
  remark: '已和家属沟通过，若高龄先生回归后，将重新办理入住',
  applicantName: '用户12',
  submitTime: '2025-10-25 18:57:01'
})

// 拒绝时间
const rejectionTime = ref('2025-10-25 19:30:00')

// 页面加载时从URL参数或sessionStorage读取数据
onMounted(() => {
  console.log('审批被拒绝页面加载开始')
  console.log('URL参数:', route.query)
  
  // 从URL参数获取被拒绝的步骤
  const step = route.query.step
  if (step) {
    const stepNumber = parseInt(step)
    if (stepNumber >= 1 && stepNumber <= 7) {
      rejectedStep.value = stepNumber - 1 // StepBar组件使用0-based索引
      console.log('设置被拒绝步骤:', stepNumber)
    }
  }
  
  // 如果有业务ID，可以在这里调用API获取数据
  const businessId = route.query.id
  if (businessId) {
    console.log('业务ID:', businessId)
    // TODO: 调用API获取被拒绝的申请数据，包括被拒绝的步骤
  }
  
  // 从sessionStorage读取数据（如果有的话）
  const savedData = sessionStorage.getItem('checkout_approval_data')
  if (savedData) {
    try {
      const data = JSON.parse(savedData)
      formData.value = {
        ...formData.value,
        ...data
      }
      console.log('从sessionStorage加载数据:', formData.value)
    } catch (error) {
      console.error('解析sessionStorage数据失败:', error)
    }
  }
  
  console.log('审批被拒绝页面加载完成，被拒绝步骤:', rejectedStep.value + 1)
})

// 查看合同
const viewContract = () => {
  ElMessage.info('查看合同文件：' + formData.value.contract)
}

// 返回
const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.approval-rejected-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;

  .wrap {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .content {
    padding: 20px;
  }

  .result-card {
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    overflow: hidden;

    .card-title {
      background: #f8f9fa;
      padding: 12px 16px;
      font-weight: 600;
      color: #f56c6c;
      border-bottom: 1px solid #e4e7ed;
    }

    .status-display {
      text-align: center;
      padding: 40px 20px;

      .status-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        border: 2px solid #d9d9d9;

        .icon-text {
          font-size: 36px;
          font-weight: bold;
          color: #f56c6c;
        }
      }

      .status-text {
        font-size: 24px;
        font-weight: 600;
        color: #f56c6c;
        margin-bottom: 16px;
      }

      .status-message {
        color: #606266;
        font-size: 14px;
        line-height: 1.5;
        max-width: 500px;
        margin: 0 auto;
      }
    }

    .operation-record {
      padding: 20px;
      border-top: 1px solid #e4e7ed;

      .record-title {
        font-weight: 600;
        color: #303133;
        margin-bottom: 20px;
        font-size: 16px;
      }

      .record-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        position: relative;

        &:not(:last-child)::after {
          content: '';
          position: absolute;
          left: 6px;
          top: 20px;
          bottom: -16px;
          width: 2px;
          background: #e4e7ed;
        }

        .record-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #d9d9d9;
          margin-right: 12px;
          margin-top: 4px;
          flex-shrink: 0;
        }

        .record-content {
          flex: 1;

          .record-text {
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
          }

          .record-user {
            color: #606266;
            font-size: 14px;
          }
        }

        .record-time {
          color: #909399;
          font-size: 12px;
          margin-left: 12px;
        }
      }
    }

    .footer {
      padding: 20px;
      text-align: center;
      border-top: 1px solid #e4e7ed;
      background: #f8f9fa;
    }
  }
}
</style>
